<html>
  <head>
    <title>Foursquare Client</title>
    <style>
      body {
        background: #fff;
        font-family: Helvetica;
        font-size: 12px;
        padding: 0;
        margin: 0;
        overflow: hidden;
      }

      .container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        opacity: 0;
        -webkit-transition: opacity .2s;
      }

      .signed-in #signed-in,
      .signed-out #signed-out {
        opacity: 1;
      }

      .signed-in #signed-out,
      .signed-out #signed-in {
        display: none;
      }

      .header {
        background: #eee;
        border-bottom: solid 1px #ccc;
        height: 23px;
        padding: 3px;
      }

      .scrollable {
        width: 300px;
        height: -webkit-calc(100% - 30px);
        overflow: auto;
      }

      #checkins {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }

      .checkin {
        padding: 2px;
        border-bottom: solid 1px #ccc;
        overflow: hidden;
        position: relative;
      }

      .checkin h3 {
        margin: 0;
        font-size: 14px;
        line-height: 20px;
        height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .checkin .photo {
        width: 40px;
        height: 40px;
        padding: 3px;
        float: left;
      }

      .checkin .mayor-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 18px;
        height: 17px;
      }

      .checkin .location {
        color: #999;
        height: 14px;
        overflow: hidden;
      }

      .checkin .timestamp {
        color: #999;
        font-size: 10px;
        height: 12px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="signed-in" class="container">
      <div class="header">
        <button id="sign-out-button">Sign out</button>
      </div>

      <div class="scrollable">
        <ol id="checkins"></ol>
      </div>
    </div>

    <div id="signed-out" class="container">
      <div class="header">
        <button id="sign-in-button">Sign in with Foursquare</button>
      </div>
    </div>

    <script src="loader.js"></script>
    <script src="foursquare.js"></script>
    <script src="main.js"></script>
  </body>
</html>
